<template>
  <div class="content">
    <div class="form-box">
      <h2>后台管理系统</h2>
      <el-form
        :model="loginFormData"
        status-icon
        :rules="loginFormRules"
        ref="loginFormRef"
        label-width="60px"
      >
        <el-form-item label="账 号" prop="userName" class="whiteItem">
          <el-input type="text" v-model="loginFormData.userName"></el-input>
        </el-form-item>
        <el-form-item label="密 码" prop="password" class="whiteItem">
          <el-input type="password" v-model="loginFormData.password"></el-input>
        </el-form-item>
        <el-form-item label="验 证" prop="verifty" class="whiteItem">
          <!-- 验证码部分 -->
          <Verify @success="isVerify = true" @error="isVerify = false" 
          :type="3" :showButton ='false' :barSize ='{width:"100%",height:"40px"}'></Verify>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loginSubmit">提交</el-button>
          <el-button @click="resetLogin">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// 设置验证码
import Verify from 'vue2-verify'


export default {
  data() {
    return {
      // 验证码验证设置
      isVerify:false,
      loginFormData: {
        userName: "",
        password: "",
      },
      loginFormRules: {
        userName: [
          { required: true, message: "请输入您的账号", trigger: "blur" },
          {
            min: 5,
            max: 10,
            message: "长度在 5 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入您的密码", trigger: "blur" },
          {
            min: 5,
            max: 16,
            message: "长度在 5 到 16 个字符",
            trigger: "blur",
          },
        ]
      },
    };
  },
  methods: {
    // 提交登录
    async loginSubmit() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid)
          return this.$message({
            showClose: true,
            message: "请将信息填充完整",
            type: "warning",
          });
        if(!this.isVerify) return this.$message({
          showClose: true,
          message: "请完成验证",
          type: "warning",
        })
        const data = await this.$http.post("/admin/login", {
          userName: this.loginFormData.userName,
          password: this.loginFormData.password,
        });
        if (data.data.meta.state == 200) {
          window.sessionStorage.setItem('token', data.data.token)
          this.$message({
            showClose: true,
            message: "登录成功",
            type: "success",
          });
          this.$router.push('/home')
          return 
        }
        return this.$message({
          showClose: true,
          message: "账号或者密码错误",
          type: "warning",
        });
      });
    },
    // 重置登录按钮
    resetLogin() {
      this.$refs.loginFormRef.resetFields()
    }
  },
  components:{
    Verify
  }
};
</script>

<style scoped>
.content {
  background-image: url("../../assets/img/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  min-width: 1366px;
  overflow: hidden;
}
.form-box h2 {
  color: white;
  font-weight: 400;
}
.form-box {
  background: rgba(0, 0, 0, 0.1);
  width: 350px;
  margin: 200px auto;
  padding: 10px 30px;
}
.veriftyImage {
  width: 200px;
  float: left;
}
</style>
